<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns="">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <title>Easy-Admin</title>
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport"/>
    <link rel="icon" th:href="@{/static/favicon.ico}">
    <link rel="stylesheet" th:href="@{/static/element/index.css}">
</head>
<style>
    body {
        background-color: #ffffff;
        background-image: url("../static/image/login_left.png");
        background-size: 60%;
        background-repeat: no-repeat;
    }
</style>
<body>
<div id="app">
    <template>
        <div style="display: flex;flex-direction: row;align-items: center">
            <img class="login-left-img" style="pointer-events: none;" src="../static/image/login_left.png" alt="login"/>
            <div class="login-page" v-loading="loading">
                <el-form :model="formData" :rules="rules" ref="formData" label-position="left" label-width="0px">
                    <div style="display: flex;flex-direction: column;align-items: center;justify-content: center">
                        <div class="title" style="color: #303133;font-weight: bold">{{sysConfigInfo.systemName}}</div>
                        <div class="" style="color: gray">{{sysConfigInfo.slogan}}</div>
                    </div>

                    <el-form-item prop="userName" style="margin-top: 10%">
                        <el-input type="text" prefix-icon="el-icon-user-solid" style="color: black;font-size: 16px"
                                  v-model="formData.userName" placeholder="请输入用户名"></el-input>
                    </el-form-item>

                    <el-form-item prop="password">
                        <el-input type="password" prefix-icon="el-icon-s-goods" style="color: black;font-size: 16px"
                                  v-model="formData.password" placeholder="请输入密码"></el-input>
                    </el-form-item>

                    <el-form-item prop="realName" style="margin-top: 10%">
                        <el-input type="text" prefix-icon="el-icon-user-solid" style="color: black;font-size: 16px"
                                  v-model="formData.realName" placeholder="请输入真实名称"></el-input>
                    </el-form-item>

                    <el-form-item prop="phone" style="margin-top: 10%">
                        <el-input type="text" prefix-icon="el-icon-phone" style="color: black;font-size: 16px"
                                  v-model="formData.phone" placeholder="请输入手机号"></el-input>
                    </el-form-item>

                    <el-form-item style="width:100%;margin-top: 3%">
                        <div style="display: flex;flex-direction: row;align-items: center;justify-content: space-around">
                            <el-button class="login-btn" type="primary" style="width:100%;" @click="reset"
                                       icon="el-icon-delete">重置
                            </el-button>
                            <el-button class="login-btn" type="primary" style="width:100%;" @click="register"
                                       @keyup.enter="register"
                                       icon="el-icon-user" v-loading="loginLoading">注册
                            </el-button>
                        </div>

                    </el-form-item>
                </el-form>
            </div>
        </div>

    </template>
    <div style="color: gray;text-align: center;position: fixed;bottom: 20px;margin-left: 50%;transform: translate(-50%)">
        Copyright &copy; 2023.{{sysConfigInfo.copyright}} All rights reserved.
    </div>
</div>
</body>
<script th:src="@{/static/js/jquery.min.js}"></script>
<script th:src="@{/static/js/axios.min.js}"></script>
<script th:src="@{/static/js/request.js}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsencrypt/2.3.1/jsencrypt.min.js"></script>
<script th:src="@{/static/api/login.js}"></script>
<script th:src="@{/static/js/common.js}"></script>
<script th:src="@{/static/js/vue.min.js}"></script>
<script th:src="@{/static/element/index.js}"></script>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                loading: false,
                loginLoading: false,
                formData: {},
                sysConfigInfo: {},
                rules: {
                    userName: [{required: true, message: '请输入用户名', trigger: 'blur'}],
                    password: [{required: true, message: '请输入密码', trigger: 'blur'}],
                    realName: [{required: true, message: '请输入真实名称', trigger: 'blur'}],
                    phone: [{required: true, message: '请输入手机号', trigger: 'blur'}],
                },
                checked: false,
                buttons: [],
            }
        },
        beforeCreate: function () {
            if (self !== top) {
                top.location.href = self.location.href;
            }
        },
        created() {
            this.getConfigInfo();

        },
        methods: {
            getConfigInfo() {
                this.loading = true
                requests.get("/admin/sysConfig/sysInfo").then(res => {
                    this.loading = false
                    this.sysConfigInfo = res.data
                    localStorage.setItem("publicKey", res.data.publicKey)
                })
            },

            reset() {
                this.formData = {}
            },

            register() {
                this.$refs.formData.validate((valid) => {
                    if (valid) {
                        this.loginLoading = true
                        register(this.formData).then((res) => {
                            if (res.code === '200') {
                                this.loginLoading = false;
                                this.$notify({
                                    title: '成功',
                                    message: '注册成功',
                                    type: 'success'
                                });
                                setTimeout(() => {
                                    parent.location.href = '/login';
                                }, 100)
                            } else {
                                this.loginLoading = false;
                            }
                        });
                    } else {
                        return false;
                    }
                })
            }

        }
    })
</script>
<style>
    .code-input-item .el-input__inner {
        border-radius: 0;
    }

    .login-page {
        margin-top: 10%;
        margin-left: 10%;
        width: 20%;
        height: 45%;
        border-radius: 5px;
        padding: 35px 35px 15px;
        background: white;
        color: white;
        border: 1px solid #eaeaea;
        box-shadow: 0 0 25px #cac6c6;
        /*opacity: 0.4*/
    }

    .login-btn {
        background-color: var(--baseBackground);
        color: white;
    }

    .title {
        font-size: 25px;
        font-weight: bold;
        text-align: center;
        margin-bottom: 15px;
        color: #ffffff;
    }

</style>
</html>
